<template>
	<div class="collect-list">
		<div class="com-header border-1px">
			<div class="back" onclick="javascript:history.go(-1)">
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				收藏
			</div>
			<div class="right" @click="edit()" v-show="isEdit">管理</div>
			<div class="right" @click="edit()" v-show="!isEdit">完成</div>
		</div>
		
		<div class="cl-content">
			<GoodFour :goodsList=goodsList :isEdit=isEdit :nums=nums> </GoodFour>
		</div>
		
		<div class="no-place"></div>
		<div class="cl-dialog bordertop-1px" v-if="!isEdit">
			<div class="cl-d-all">
				<input type="checkbox" class="input-checkbox" @click="checkedAll" :checked="goodsList.length===nums.length && nums.length"
				 :class="{active: !isCheckedAll}">
				<span>全选</span>
			</div>
			<div class="cl-d-del" @click="del()">
				<p>删除</p>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		Toast
	} from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import GoodFour from '../components/goods_four'
	export default {
		components: {
			GoodFour
		},
		data() {
			return {
				isEdit: true,
				is_collect: '',
				origin_id: '',
				goodsList: [],
				gList: [],
				nums: [],
				isCheckedAll: true
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			edit: function() {
				this.isEdit = !this.isEdit
			},

			del: function() {
				var check1 = document.getElementsByName("checkboxinput");
				var str = [];
				for (var i = 0; i < check1.length; i++) {
					if (!check1[i].checked) {
						str.push(this.goodsList[i].origin_id)
					}
				}
				var params = new URLSearchParams();
				params.append('is_collect', 0);
				params.append('origin_id', str);
				axios.post(Http.COLLECTLIST, params)
					.then(res => {
						var ret = res.data;
						this.gList = ret.data;
						var a = this.goodsList;
						var b = str;
						for (var i = 0; i < b.length; i++) {
							for (var j = 0; j < a.length; j++) {
								if (a[j].origin_id == b[i]) { //如果是id相同的，那么a[ j ].id == b[ i ].id
									this.goodsList.splice(j, 1);
								}
							}
						}
						for (var i = 0, len = this.goodsList.length; i < len; i++) {
							this.nums.push(i);
						}
					})
			},
			checkedAll: function(e) {
				this.isCheckedAll = e.target.checked;
				if (this.isCheckedAll) { //全选时
					this.nums = []
					for (var i = 0, len = this.goodsList.length; i < len; i++) {
						this.nums.push(i);
					}
				} else {
					this.nums = []
				}
			},

			getData() {
				var params = new URLSearchParams();
				params.append('is_collect', this.is_collect);
				params.append('origin_id', this.origin_id);
				axios.post(Http.COLLECTLIST, params)
					.then(res => {
						var ret = res.data;
						if (ret.code == 1) {
							this.goodsList = ret.data;
							for (var i = 0, len = this.goodsList.length; i < len; i++) {
								this.nums.push(i);
							}
						}

					})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.collect-list {
		.cl-content {
			@import '../assets/common/common.scss'
		}

		.cl-dialog {
			position: fixed;
			bottom: 0;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 1rem;
			line-height: 1rem;
			background: #fff;

			.cl-d-all {
				margin-left: 0.24rem;
				position: relative;

				input {
					width: 0.54rem;
					height: 0.54rem;
					border-radius: 0.54rem;
					border: 0.01rem solid #e4e7ed;

					&.active {
						background-color: #ff3d00;
						background-image: url(../assets/img/selected.png);
						background-size: contain;
						border: none;
					}
				}

				span {
					margin-left: 0.1rem;
					font-size: 0.28rem;
				}
			}

			.cl-d-del {
				flex: 0 0 20%;
				font-size: 0.30rem;
				width: 20%;
				background: rgb(255, 101, 68);
				color: #fff;
			}
		}
	}
</style>
